<template>
	<view class="register">
		<view class="input-box input-box-phone">
			<view>
				<image src="/static/images/phone-icon.png" mode=""></image>
				<view>|</view>
			</view>
			<input type="number" pattern="\d*" maxlength="11" class="phone-ipt" value="" v-model="phone" placeholder="请输入手机号码" placeholder-style="color:#C0C0C0;font-size:28rpx;" />	
		</view>
		<view class="input-box">
			<view>
				<image src="/static/images/code.png" mode=""></image>
				<view>|</view>
			</view>
			<input type="text" class="phone-ipt phone-ipt-code" v-model="imgCode" placeholder="请输入图形验证码"  placeholder-style="color:#C0C0C0;font-size:28rpx;" />	
			<view class="getMsgCode" @click="getCapchaBeforeSms()" v-if="!captcha_image" >获取图形验证码</view>
			<view class="imgCode" v-else @click="getCapchaBeforeSms()">
				<image :src="captcha_image" mode=""></image>
			</view>
		</view>
		<view class="input-box">
			<view>
				<image src="/static/images/code.png" mode=""></image>
				<view>|</view>
			</view>
			<input type="number" class="phone-ipt phone-ipt-code phone-ipt-code1" v-model="verificationCode" placeholder="请输入验证码"  placeholder-style="color:#C0C0C0;font-size:28rpx;" />	
			<view class="getMsgCode" @click="getVerificationCode()" >{{ !showCount?'获取验证码':countTime+'秒后重试'}}</view>
		</view>
		<view class="input-box wechat-nickname">
			<view>
				<image src="/static/images/wechat.png" mode="" class="wechat-icon"></image>
				<view>|</view>
			</view>
			<input type="text" class="phone-ipt" value="" v-model="wechatName" placeholder="请输入微信昵称" placeholder-style="color:#C0C0C0;font-size:28rpx;" />	
		</view>
		<view class="wechat-nickname-tips"><text>*</text>为了方便伙伴找到你请输入<text class="wechat-nickname-tips-text">微信昵称</text></view>
		<view class="input-box">
			<view>
				<image src="/static/images/password.png" mode=""></image>
				<view>|</view>
			</view>
			<input type="password" class="phone-ipt" value="" v-model="password" placeholder="请输入至少6位的登录密码" placeholder-style="color:#C0C0C0;font-size:28rpx;" />	
		</view>
		<view class="input-box">
			<view>
				<image src="/static/images/invitcode.png" mode=""></image>
				<view>|</view>
			</view>
			<input type="text" class="phone-ipt" value="" :disabled="disabled" v-if="invite_code" v-model="invite_code" placeholder="邀请码：XLOIUHN56" placeholder-style="color:#C0C0C0;font-size:28rpx;" />	
			<input type="text" class="phone-ipt" value=""  v-else v-model="invite_code" placeholder="邀请码：XLOIUHN56" placeholder-style="color:#C0C0C0;font-size:28rpx;" />	
		</view>
		<view class="registerNow" @click="registerByApp()" >立即注册</view>
	</view>
</template>

<script>
	import store from "store";
	import { registerByApp,sendingSmsCode,loginByApp,getCapchaBeforeSms } from 'api/authApi.js'
	import { mapGetters,mapMutations,mapActions } from 'vuex'
	
	export default{
		store,
		data(){
			return {
				phone:'',
				verificationCode:'',
				password:'',
				wechatName:'',
				invite_code:null,
				showCount:false,
				countTime:null,
				disabled:false,
				captcha_image:null,
				captcha_key:null,
				imgCode:null
			}
		},
		computed:{
			
		},
		methods:{
			...mapActions([
				'login'
			]),
			
			async registerByApp(){
				let params = {
					phone:this.phone,
					sms_key:this.sms_key,
					sms_code:this.verificationCode,
					password:this.password,
					invite_code:this.invite_code,
					name:this.wechatName,
					agreement:1
				}
				if(this.phone==''){
					uni.showToast({
						icon:'none',
						title:'请输入手机号'
					})
				}else if(this.verificationCode == ''){
					uni.showToast({
						icon:'none',
						title:'请输入验证码'
					})
				}else if(this.wechatName == ''){
					uni.showModal({
						title: '提示', content: '为了方便伙伴找到你请输入微信昵称!', showCancel: false
					})
				}else if(this.password == ''){
					uni.showToast({
						icon:'none',
						title:'请输入密码'
					})
				}else{
					let res =  await registerByApp(params)
					if(!res.message){
						uni.showToast({
							title:'注册成功！',
							duration:1000
						})
						setTimeout(()=>{
							// this.loginByApp()
							uni.navigateBack({})
						},1000)
					}else{
						uni.showModal({
							title:'提示',
							content:Object.values(res.errors)[0][0],
							confirmColor:'#FF6011',
							confirmText:'我知道了',
							showCancel:false
						})
					}
				}
			},
			async loginByApp(){
				let params = {
					phone:this.phone,
					password:this.password,
					captcha_code:this.imgCode,
					captcha_key:this.captcha_key
				}
				await this.login(params)
				
				uni.removeStorage({
					key: 'invite_code'
				})
				uni.reLaunch({
					url: '/pages/mine/mine'
				})
			},
			getCapchaBeforeSms(){
				this.captcha_key = null;
				this.imgCode = null;
				if(this.phone!=''&&this.isPhoneAvailable(this.phone)){
					let parms = {
						phone:this.phone,
						type:'reset_password'
					}
					getCapchaBeforeSms(parms).then(res=>{
						if(!res.message){
							this.captcha_image = res.captcha_image_content
							this.captcha_key = res.captcha_key
						}else{
							uni.showModal({
							  title: '提示', content: Object.values(res.errors)[0][0], showCancel: false
							})
						}
					})
				}else{
					uni.showToast({
						icon:'none',
						title:'请输入手机号'
					})
				}
			},
			getVerificationCode(){
				if (this.showCount) { return }
				let phone = this.phone;
				let isPhone = this.isPhoneAvailable(phone);
				if(phone==''){
					uni.showToast({
						icon:'none',
						title:'请输入手机号'
					})
				}else if(!isPhone){
					uni.showToast({
						icon:'none',
						title:'请输入正确的手机号'
					})
				}else if(!this.imgCode){
					uni.showToast({
						icon:'none',
						title:'请输入图形验证码'
					})
				}else{
					let time = 60;
					let params = {
						phone:this.phone,
						type:'register_account',
						captcha_key:this.captcha_key,
						captcha_code:this.imgCode
					}
					sendingSmsCode(params).then(res=>{
						if(!res.message){
							this.showCount = true;
							this.countTime = time;
							this.setCountTime(time);
							this.sms_key = res.key;
						}else{
							this.captcha_key = null;
							this.imgCode = null;
							this.captcha_image = null;
							uni.showModal({
							  title: '提示', content: Object.values(res.errors)[0][0], showCancel: false
							})
						}
						
					})
				}
			},
			setCountTime(time) {
				let count = setInterval(() => {
					time = time - 1
					this.countTime = time
					if (this.countTime == 0) {
						this.showCount = false
						this.countTime = null
						clearInterval(count)
					}
				}, 1000)
			},
			isPhoneAvailable(str) {
				let myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
				if (!myreg.test(str)) {
					return false;
				} else {
					return true;
				}
			}
		},
		onLoad(opitions) {
			if(opitions.invite_code!=undefined){
				this.invite_code = opitions.invite_code
				this.disabled = true
			}
		}
	}
</script>

<style scoped lang="scss">
	.register{
		padding-top: 120rpx;
	}
	.input-box{
		width: 614rpx;
		height: 84rpx;
		margin: 0 auto 40rpx;
		background: #F5F5F5;
		border-radius: 42rpx;
		border: 1rpx solid #F5F5F5;
		display: flex;
		align-items: center;
		>view{
			display: flex;
			align-items: center;
			height: 100%;
			color: #C0C0C0;
			>image{
				display: block;
				width: 56rpx;
				height: 56rpx;
				margin-left: 24rpx;
			}
			.wechat-icon{
				width: 40rpx;
				height: 40rpx;
				margin-right: 15rpx;
			}
		}
		.getMsgCode{
			font-size: 28rpx;
			font-weight: 400;
			color: #F02A28;
		}
		.imgCode{
			width:230rpx;
			height:70%;
			margin-right: 30rpx;
			
			>image{
				display: block;
				width: 100%;
				height: 100%;
				// border-radius:0 42rpx 42rpx 0;
			}
		}
	}
	.wechat-nickname{
		margin-bottom: 15rpx;
	}
	.wechat-nickname-tips{
		width: 614rpx;
		margin: 0 auto;
		font-size: 24rpx;
		font-weight: 400;
		color: #1877FF;
		color: #F02A28;
		text-align: center;
		margin-bottom: 30rpx;
		.wechat-nickname-tips-text{
			color: #F02A28;
		}
	}
	.phone-ipt{
		margin-left: 24rpx;
		font-size: 28rpx;
		color: #555555;
		width:420rpx;
	}
	.phone-ipt-code{
		width:280rpx;
	}
	.phone-ipt-code1{
		width:300rpx;
	}
	.registerNow{
		width: 614rpx;
		height: 84rpx;
		background: linear-gradient(90deg, #FFE066 0%, #FEBD01 100%);
		border-radius: 42rpx;
		display:flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
		letter-spacing: 2rpx;
		margin: 100rpx auto 0;
	}
	
</style>
